<template>
  <h1>El-布局组件</h1>
  <el-row>
    <el-col :span="6">哈哈哈哈哈哈</el-col>
    <el-col :span="6">哈哈哈哈哈哈</el-col>
    <el-col :span="6">哈哈哈哈哈哈</el-col>
    <el-col :span="6">哈哈哈哈哈哈</el-col>
  </el-row>
  <h3>两张图</h3>
  <el-row>
    <el-col :span="12"><img src="rich.jpg" style="width:100%;"></el-col>
    <el-col :span="12"><img src="rich.jpg" style="width:100%;"></el-col>
  </el-row>
  <h3>六张图</h3>
  <el-row :gutter="20">
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
  </el-row>
  <h3>列偏移</h3>
  <!-- :offset 列偏移,默认值为0,默认靠左,写几表示向右移动几列 -->
  <el-row>
    <el-col :offset="4" :span="20"><img src="rich.jpg" style="width:100%;"></el-col>
  </el-row>
  <el-row>
    <!-- 居中:图片12列,还剩12列,向右移动了6列,左右各6列,所以图片居中 -->
    <el-col :offset="6" :span="12"><img src="2024.png" style="width:100%;"></el-col>
  </el-row>
  <!-- 有三张图,它们的宽度比为 1:2:3 -->
  <el-row>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="8"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="12"><img src="2024.png" style="width:100%;"></el-col>
  </el-row>
  <!-- 有8列,内容为1 2 ... 8,均分一行 -->
  <el-row :gutter="10">
   <el-col :span="3" v-for="item in 8">{{ item }}</el-col>
  </el-row>
  <br>
  <br>
  <!-- 布局嵌套 -->
  <el-row :gutter="10">
   <el-col :span="12" style="border:5px solid red;">12</el-col>
   <el-col :span="12" style="border:5px solid #0f0;">
     <!-- 看作新的一行row 重新瓜分24列 -->
     <el-row :gutter="10">
      <el-col :span="8" style="border:5px solid blue;">8</el-col>
      <el-col :span="8" style="border:5px solid #f0f;">8</el-col>
      <el-col :span="8" style="border:5px solid #00f;">8</el-col>
     </el-row>
   </el-col>
  </el-row>

</template>

<script setup>

</script>

<style scoped>

</style>